<template>
  <div class="fpv_container">
    <el-form :model="ruleForm" :rules="rules"
             status-icon
             ref="ruleForm">

      <el-tabs v-model="activeName"  :stretch="true" type="border-card">

        <el-tab-pane label="重置密码" name="first" >

          <el-form-item>
            <el-input
                placeholder="请输入手机号"
                v-model="ruleForm.phoneNumber"
                clearable>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input
                placeholder="请输入验证码"
                v-model="ruleForm.captcha"
                clearable>
              <el-button slot="append" @click="verifyCodeClick">获取验证码</el-button>
            </el-input>
          </el-form-item>

          <el-form-item style="margin-bottom: 2px">
            <el-input
                placeholder="请输入新密码"
                v-model="ruleForm.password"
                show-password
                clearable>
            </el-input>
          </el-form-item>

          <el-form-item style="margin-top: 30px"><el-button @click="resetPasswordClick">确定</el-button></el-form-item>

        </el-tab-pane>

      </el-tabs>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      ruleForm:{
        phoneNumber: '',
        captcha: '',
        password: ''
      }
    };
  },
  rules: {
    phoneNumber:[{require: true , trigger:'blur'}],
    captcha:[{require: true , trigger:'blur'}],
    password:[{require: true , trigger:'blur'}]
  },
  methods: {
    verifyCodeClick(){
      this.$http({
        url:"http://47.104.100.60:82/sendVerifyCode",
        method:"post",
        data:{
          iphone:this.ruleForm.phoneNumber
        }
      }).then(res => {
        //  alert展示验证码已经发送
        if (res.data[0].message== 'send success'){
          alert("发送成功")
        }else{
          alert("手机号不正确")
        }
      }).catch(err=>{
        alert("发送失败")
        console.log(err)
      })
    },
    resetPasswordClick(){
      this.$http({
        url:"http://47.104.100.60:82/changeCommonUserPassword",
        method:"post",
        data:{
          iphone:this.ruleForm.phoneNumber,
          verifyCode:this.ruleForm.captcha,
          password:this.ruleForm.password
        }
      }).then(res => {
        //重置密码之后跳转到登录界面
        this.$router.push({
          path:'/login',

        })
      }).catch(err=>{
        console.log(err)
      })
    }
  }
};
</script>

<style>
.fpv_container{
  margin-top:180px;
  width: 20%;
  margin-left: 40%;

}
</style>

<style lang ="css" scoped>
.el-tabs >>> {
  background-color: #ffffff;
}
</style>